<script lang="ts" setup>
  import { ref } from 'vue';
  import Switch from '@sscd/switch';
  import Alert from '@sscd/alert';
  import Spin from '@sscd/spin';
  const spinning = ref<boolean>(false);
</script>

<template>
  <div class="demo">
    <div class="demo-title">卡片加载中</div>
    <div class="demo-content">
      <Spin :spinning="spinning">
        <Alert message="Alert 标题" description="有关 alert 的更多详情。" />
      </Spin>
      <div class="mt16">
        加载状态：
        <Switch v-model:checked="spinning" />
      </div>
    </div>
  </div>
</template>

<style scoped>
  .mt16 {
    margin-top: 16px;
  }
</style>
